<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a href="#/home">首页</a>
    <a href="#/about">关于</a>
    <div class="router-view"></div>
</div>
    <script>
        /* hash的方式实现路由改变 */
        const routerViewEl = document.getElementsByClassName("router-view")[0]
        <!--监听url的改变-->
        window.addEventListener("hashchange", ev => {
            switch (location.hash) {
                case "#/home":
                    routerViewEl.innerHTML = "首页";
                    break;
                case "#/about":
                    routerViewEl.innerHTML = "关于";
                    break;
                default:
                    routerViewEl.innerHTML = ""
                    break;
            }
        })
        /* 优势是兼容性好，在IE中也可以使用，缺点是总是多一个#*/
    </script>
</body>
</html>